<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的家乡网站</title>
    
    <script src="./素材/js/jquery.js"></script>
    <script src="./素材/js/jquery.mousewheel.js"></script>
    <script src="./素材/js/index.js"></script>
    <script src="./素材/js/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="./素材/css/style.css">
    <link rel="stylesheet" href="../web前端实训项目/素材/css/swiper-bundle.min.css">
</head>
<body>
    <h1>软件2214张豪龙</h1>
    <section>
        <header class="header">
        <h1 class="logo"><a href="javascript:;">
            <img src="./素材/images/logo.png" alt="">
        </a>
        </h1>
        <ul class="nav">
            <li><a href="javascript:;">
                <!-- 为点击显示 -->
                <img src="./素材/images/home.png" alt="">
                <!-- 点击后显示 -->
                <img src="./素材/images/home_gruen.png" alt="">
            </a></li>
            <li><a href="javascript:;">历史</a></li>
            <li><a href="javascript:;">美食</a></li>
            <li><a href="javascript:;">景点</a></li>
            <li><a href="javascript:;">名人</a></li>
        </ul>
        <!-- 指示器 -->
        <div class="arrow"></div>
    </header>
    <!-- 内容部分 -->
    <div id="conten">
        <ul class="list">
                <!-- 第一屏首页 -->
                <li class="home">
                    <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./素材/images/xian1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./素材/images/xian2.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./素材/images/xian3.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./素材/images/xian4.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./素材/images/xian5.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./素材/images/xian6.jpg" alt=""></div>
                    </div>
                    <!-- 分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 导航按钮 -->
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>

                </div>
                </li>
                <!-- 历史名胜 -->
                <li class="history">
                    <div>
                        <!-- 左侧文本 -->
                        <div class="test">
                            <!-- 标题文本 -->
                            <div class="headTest">我是开头</div>
                            <!-- 内容文本 -->
                            <div class="contentTest">我是内容</div>
                        </div>
                        

                        <!-- 开始放置图片 -->
                        <div class="pice">
                            <div class="item">
                                <!-- 正面图片 -->
                                <div class="fonnt">半坡遗址</div>
                                <!-- 背面的图片 -->
                                <div class="back"><img src="../web前端实训项目/素材/images/banpo.jpg" alt=""></div>
                            </div>
                            <div class="item">
                                <div class="fonnt">汉长安城</div>
                                <div class="back"><img src="./素材/images/changancheng.jpg" alt=""></div>
                            </div><div class="item">
                                <div class="fonnt">秦兵马俑</div>
                                <div class="back"><img src="./素材/images/bingmayong.jpg" alt=""></div>
                            </div><div class="item">
                                <div class="fonnt">大雁塔</div>
                                <div class="back"><img src="./素材/images/dayanta.jpg" alt=""></div>
                            </div><div class="item">
                                <div class="fonnt">唐大明宫</div>
                                <div class="back"><img src="./素材/images/daminggong.jpg" alt=""></div>
                            </div><div class="item">
                                <div class="fonnt">明钟楼</div>
                                <div class="back"><img src="./素材/images/zhonglou.jpg" alt=""></div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- 美食 -->
                <li class="food">
                    <div>

                        <div class="text">吃在宝鸡</div>
                        <div class="pice">
                            <div class="item">
                                <img src="./素材/images/food1.jfif" alt="">
                                <div class="mask">陕西油泼面</div>
                                <div class="icon"></div>
                            </div>
                            <div class="item">
                                <img src="./素材/images/food2.jfif" alt="">
                                <div class="mask">饺子</div>
                                <div class="icon"></div>
                            </div>
                            <div class="item">
                                <img src="./素材/images/food3.jfif" alt="">
                                <div class="mask">陕西面皮</div>
                                <div class="icon"></div>
                            </div>
                            <div class="item">
                                <img src="./素材/images/food4.jfif" alt="">
                                <div class="mask">羊肉泡馍</div>
                                <div class="icon"></div>
                            </div><div class="item">
                                <img src="./素材/images/food5.jfif" alt="">
                                <div class="mask">牛肉</div>
                                <div class="icon"></div>
                            </div><div class="item">
                                <img src="./素材/images/food6.jfif" alt="">
                                <div class="mask">关中肉夹馍</div>
                                <div class="icon"></div>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- 景点 -->
                <li class="senery">
                    <div></div>
                </li>
                <!-- 名人 -->
                <li class="person">
                    <div></div>
                </li>
            </ul>
            
    </div>
        
    </section>
</body>
</html>